<template>
  <div class="loginBlock">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      label-position="top"
      class="ruleForm">
      <h3 class="formTitle">注册</h3>
      <p>SIGN UP</p>
      <el-form-item
        prop="name"
        label="昵称">
        <el-input
          v-model="ruleForm.name"
          placeholder="NAME"/>
      </el-form-item>
      <el-form-item
        prop="email"
        label="注册邮箱">
        <el-input
          v-model="ruleForm.email"
          placeholder="EMAIL"/>
        <el-button 
          size="mini" 
          round
          @click="sendMsg">发送验证码</el-button>
        <span>{{ statusMsg }}</span>
      </el-form-item>
      <el-form-item
        prop="pwd"
        label="密码">
        <el-input
          v-model="ruleForm.pwd"
          placeholder="PASSWORD"
          type="password"/>
      </el-form-item>
      <el-form-item
        prop="cpwd"
        label="确认密码">
        <el-input
          v-model="ruleForm.cpwd"
          placeholder="PASSWORD"
          type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button
          class="submitBtn"
          type="primary"
          @click="onSubmit('ruleForm')">注册</el-button>
        <div class="errMsg">{{ err }}</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  layout: "blank",
  data() {
    return {
      ruleForm: {
        email: "",
        name: "",
        pwd: "",
        cpwd: "",
        code: ""
      },
      statusMsg:'',
      err:'',
      rules: {
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] }
        ],
        pwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "密码长度最少6个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入您的昵称", trigger: "blur" },
          { min: 3, message: "昵称最少3个字符", trigger: "blur" }
        ],
        cpwd: [
          { required: true, message: "请输入确认密码1", trigger: "blur" },
          { validator:(rulse,value,callback)=>{
            console.log(value)
            if(value==='') callback(new Error('请输入确认密码'))
            else if(value!==this.ruleForm.pwd) callback(new Error('两次输入的密码不一致，请重新输入'))
            else callback()
          },trigger:"blur"}
        ]
      }
    };
  },
  methods: {
    onSubmit(FN) {
      this.$refs[FN].validate(valid => {
        if (valid) console.log("submit!");
        else {
          console.log("error");
          return false;
        }
      });
    },
    sendMsg() {}
  }
};
</script>

<style>
.loginBlock {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.formTitle {
  text-align: center;
  color: #409eff;
  font-size: 24px;
  font-weight: normal;
}
.formTitle ~ p {
  color: #409eff;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
}
.ruleForm {
  width: 400px;
  padding: 10px 20px;
  background-color: #f4f7f8;
  border-radius: 8px;
}
.submitBtn {
  width: 100%;
  margin-top: 10px;
}
.el-form-item__label {
  padding: 0 !important;
}
.errMsg {
  text-align: center;
  color: red;
}
</style>